import "../assets/css/add-interaction.css";

/**
 * 响应事件
 * 使用 React 可以在 JSX 中添加 事件处理函数。其中事件处理函数为自定义函数，它将在响应交互（如点击、悬停、表单输入框获得焦点等）时触发。
 */

// 1. 添加事件处理函数 Start

// export default function Button() {
//     // 1. 在组件的内部声明一个事件处理函数 通常在组件的内部定义
//     function handleClick() {
//         alert('You clicked me!');
//     }

//     return (
//         // <button onClick={handleClick} >未绑定任何事件</button>
//         // 内联的事件处理函数
//         // <button onClick={function handleClick() {
//         //     alert('内联的事件处理函数');
//         // }} >未绑定任何事件</button>
//         <button onClick={() => alert('箭头函数')}>按钮</button>
//     )
// }

// 添加事件处理函数 End

// 2. 在事件处理函数中读取 props  Start

// function AlertButton({ message, children }) {
//     // 由于事件处理函数声明与组件内部，因此它们可以直接访问组件的props。
//     return (
//         <button onClick={() => alert(message)}>{children}</button>
//     )
// }
// export default function Toobar() {
//     return (
//         <div>
//             <AlertButton message='正在播放'>播放电影</AlertButton>
//             <AlertButton message='正在上传'>上传图片</AlertButton>
//         </div>
//     )
// }

// 2. 在事件处理函数中读取 props  End

// 3. 将事件处理函数作为props传递 Start

// function Button({ onClick, children }) {
//     // Button 组件接收一个名为onClick的prop，然后将这个onClick的prop传递给浏览器内置的<button>
//     return (
//         <button onClick={onClick}>{children}</button>
//     )
// }

// function PlayButton({ movieName }) {

//     function handlePlayClick() {
//         alert(`正在播放 ${movieName}`);
//     }

//     return (
//         // 将handlePlayClick作为props传递
//         <Button onClick={handlePlayClick}> 播放 "{movieName}" </Button>

//     )
// }

// function UploadButton({ children }) {
//     return (
//         // 将箭头函数作为props传递
//         <Button onClick={() => alert('正在上传图片')}>{children}</Button>
//     )
// }

// export default function Toobar() {
//     return (
//         <div>
//             <PlayButton movieName="魔女宅急便"></PlayButton>
//             <UploadButton>上传图片</UploadButton>
//         </div>
//     )
// }

// 3. 将事件处理函数作为props传递 End

// 4. 命名事件处理函数 Start

// function Button({ onSmash, children }) {
//     // 自定义的Button组件接收到的prop名称
//     return (
//         <button onClick={onSmash}>{children}</button>
//     )
// }

// export default function Toobar() {
//     return (
//         <div>
//             <Button onSmash={() => alert('正在播放！')}>播放电影</Button>
//             <Button onSmash={() => alert('正在上传！')}>上传图片</Button>
//         </div>
//     )
// }

// 4. 命名事件处理函数 End

// 5. 事件传播 Start

// export default function Toobar() {
//     return (
//         <div className="Toolbar" onClick={() => {
//             alert('你点击了 toolbar ！');
//         }}>
//             <button onClick={() => alert('正在播放')}>播放电影</button>
//             <button onClick={() => alert('正在上传')}>上传图片</button>
//         </div>
//     )
// }

// 5. 事件传播 End

// 6. 传递处理函数作为事件传播的替代方案  Start

// function Button({ onClick, children }) {
//     return (
//         <button onClick={e => {
//             e.stopPropagation();
//             onClick();
//         }}>{children}</button>
//     )
// }

// export default function Toobar() {
//     return (
//         <div className="Toolbar" onClick={() => {
//             alert('你点击了 toolbar ！');
//         }}>
//             <Button onClick={() => alert('正在播放')}>播放电影</Button>
//         </div>
//     )
// }

// 6. 事件传播 End

// 7. 阻止默认行为 Start

// function Signup() {
//     return (
//         <form onSubmit={e => {
//             e.preventDefault();
//             alert('提交表单');
//         }}>
//             <input />
//             <button>发送</button>
//         </form>
//     )
// }

// export default function Toobar() {
//     return (
//         <Signup></Signup>
//     )
// }

// 7. 阻止默认行为 End
